<template>
  <div class="settlement">
      <div class="photo_preview" v-show="show_preview">
        <div class="preview_iframe">
          <span id="photo_preview_title">{{preview_title}}</span>
          <span id="close_title" class="close" @click="show_preview=false"></span>
        </div>
        <div class="photo_box">
          <p id="isSelf">该车辆外观损伤照片由其他用户拍摄 供参考</p>
          <img id="img_preview" class="pre" :src="preview_url">
          <button id="re_upload" style="border-radius: 0.106667rem;">
            <img src="http://h5.shouqiev.com/app/upload_for_car/fixed_camera/images/bg_camera.png" style="width: 0.48rem;margin-right:0.064rem;">
            重新拍摄
          </button>
        </div>
      </div>
      <div class="mask" v-show="show_mask||show_preview||show_add"></div>

      <div class="camera-title">
        <h3>
          <img src="//h5.shouqiev.com/app/upload_for_car/fixed_camera/images/icon_check_detail@2x.png" style="width: 0.48rem;margin-right:0.064rem;">查阅验车单
        </h3>
        <p>请对照以下验车单检查车辆外观</p>
      </div>
      <div class="bottom_group">
        <button id="add_photo" @click="show_add=true">
          <img src="http://h5.shouqiev.com/app/upload_for_car/fixed_camera/images/bg_camera.png" style="width: 0.48rem;margin-right:0.064rem;">
          补充新伤
        </button>
        <input type="button" :value="showMsg" class="submit" disabled="true" v-show="canSubmit">
        <input type="button" value="检查完毕" class="submit" v-show="!canSubmit" @click="submit">
      </div>
      <Inspect @pushImg="change" :toInspectArr="preview_arr" :addInspectArr="additional_preview_arr" id="only_show"></Inspect>
      <!-- pushImg预览已有的车损照片 -->
      <Inspect @receiveFromInspect="commitImg" id="add_photo_inspect" v-if="show_add"></Inspect>
  </div>
</template>

<script type="text/babel">
  import Inspect from '../components/inspect.vue'
  import $ from "jquery"
  import qs from 'qs'
  export default{
    name: 'settlement',
    components: {
      Inspect
    },
    data () {
      return {
        preview_arr : [
            {
              "tp":"LB_SIDE",
              "imgUrl":"http://aliimg.gfdev.cloudns.asia:88/group1/M00/00/01/rB8wzFov3keAe7n6AACdg0XdCII095.jpg"
            }
            // ,{
            //   "tp":"RB_SIDE",
            //   "imgUrl":"http://aliimg.gfdev.cloudns.asia:88/group1/M00/00/01/rB8wzFov3keAe7n6AACdg0XdCII095.jpg"
            // },{
            //   "tp":"R_REFLECTOR",
            //   "imgUrl":"http://aliimg.gfdev.cloudns.asia:88/group1/M00/00/01/rB8wzFov3keAe7n6AACdg0XdCII095.jpg"
            // },{
            //   "tp":"CARTAIL",
            //   "imgUrl":"http://aliimg.gfdev.cloudns.asia:88/group1/M00/00/01/rB8wzFov3keAe7n6AACdg0XdCII095.jpg"
            // },{
            //   "tp":"TRUNK",
            //   "imgUrl":"http://aliimg.gfdev.cloudns.asia:88/group1/M00/00/01/rB8wzFov3keAe7n6AACdg0XdCII095.jpg"
            // },{
            //   "tp":"CARINSIDE",
            //   "imgUrl":"http://aliimg.gfdev.cloudns.asia:88/group1/M00/00/01/rB8wzFov3keAe7n6AACdg0XdCII095.jpg"
            // },
          ],
        additional_preview_arr : [1,2],
        preview_title: "",
        show_preview : 0,
        show_add     : 0,
        show_mask    : 0,
        preview_url  : "http://img.shouqiev.com/upload/img/loadPic/233/1515487963277.jpg",
        canSubmit    : 5,
        showMsg      : "确认无新伤(5)",
        pics         : [],
        before       : null,
        orderId      : null,
      }
    },
    mounted:function(){
      this.before = this.$route.query.before;
      this.orderId = this.$route.query.orderId;
      console.log("this.before",this.before)
      this.daojishi()
    },
    methods:{
      commitImg(url,title){
        console.log("commitImg",url,title)
        this.pics.push(JSON.stringify({imgUrl:url,tp:title}))
        this.additional_preview_arr.push({imgUrl:url,tp:title})
        console.log("this.pics::::-----",this.pics)
      },
      submit(){
        console.log("提交","["+this.pics.join(",")+"]")
        console.log("this.before",this.before)
        this.axios.post('/car/v313/uploadCarBeforeImage.json', qs.stringify({
            orderId: this.orderId,
            userCarBeforeTakePicture:2,
            pics:this.pics
        }))
        .then(function (res) {
          if (res.data.code == 200) {
            this.$router.push('face')
          }else{
            alert(res.data.desc)
          }
        })
        // this.$router.go({name:"face",params:{type:"before"}})
      },
      daojishi(){
        var _this = this
        var timer = setInterval(function(){
          _this.canSubmit--
          _this.showMsg = "确认无新伤("+_this.canSubmit+")"
          if(_this.canSubmit<=0){
            clearInterval(timer)
          }
        },1000)
      },
      change(msg,title){
        if(msg){
          this.show_preview = true;
          this.preview_url  = msg;
          this.preview_title = title;
        }
      }
    }

  }

</script>

<style scoped>
  .preview_iframe{
    height:1.2rem;line-height:1.2rem;background: #F5F5F5;border-radius: 0.533333rem 0.533333rem 0 0;position: relative;font-size:0.426667rem;color:#696969;text-align: center;
  }

    img{
      display: inline-block;
    }
    .camera-title{
      box-sizing: content-box;
    }
    body{
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    input,textarea {
        -webkit-user-select:auto;
        margin: 0px;
        padding: 0px;
        outline: none;
    }

    div.camera-title{
      height: 112px;
      padding: 0.266667rem;
      background: #F5F5F5;
      position: relative;
      overflow: hidden;
      z-index:9999;
    }
    div.camera-title h3{
      font-size: 0.373333rem;
      color: #696969;
      height: 0.8rem;
      line-height: 0.8rem;
    }
    div.camera-title small,div.camera-title span{
      font-size: 0.32rem;
      color: #AAAAAA;
    }
    div.camera-title p{
      font-size: 0.293333rem;
      color: #AAAAAA;
    }


    #only_show{
      width:10rem;height:11.2rem;border:none;
      position: fixed;top:50%;

      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
    }
    #add_photo_inspect{
      width:10rem;
      height:11.2rem;
      border:none;
      position: fixed;
      bottom:0;
      z-index: 99999;
    }



    .bottom_group{
        display: flex;
        display: -webkit-flex;
        justify-content: space-around;
        -webkit-justify-content: space-around;
        padding-top:0.75rem;
        box-sizing: border-box;
        z-index: 9998;
    }
    .bottom_group input,.bottom_group button{
      border-radius: 50px;
      width: 4.6rem;
      height: 1.226667rem;
      line-height: 1.226667rem;
      border:none;
      font-size: 0.426667rem;
    }
    #add_photo{
      outline: none;
      background: #FFF;
      color: #919191;
      border:solid 0.026667rem #F2F2F2;
    }
    .submit{
      background: #0DB95F;
      color:white;
    }
    .submit:disabled{
      background: #DCDCDC;
      color:white;
    }



    .photo_preview{
      width:10rem;
      position: fixed;
      bottom:0;
      left:0;
      z-index: 10001;
    }
    .photo_box{
      position: relative;
      background:white;
      text-align: center;

      overflow: hidden;
    }
    .photo_box p{
      font-size: 0.32rem;
      color: #AAAAAA;
      text-align: center;
      margin:0.3rem auto;
    }
    .photo_box img.pre{
        max-width: 9rem;
        max-height: 6rem;
      margin:0.3rem auto;
    }
    .photo_box button{
      display: block;
      width: 9.466667rem;
      height: 1.226667rem;
      border:solid #F2F2F2 0.026667rem;
      border-radius: 0.106667rem;
      background:white;
      font-size: 0.426667rem;
      margin:0.3rem auto;
    }
    .close{
      transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      position: relative;
      width:0.8rem;
      height: 0.8rem;
      display: inline-block;
      position: absolute;
      right:0.28rem;
      top:0.2rem;
    }
    .close:before,.close:after{
      content: " ";
      position: absolute;
      left:50%;top: 50%;
      background:#383838;
    }
    .close:before{
      width:0.05rem;margin-left: -0.025rem;
      height: 0.7rem;margin-top:-0.35rem;
    }
    .close:after{
      height:0.05rem;margin-top:-0.025rem;
      width: 0.7rem;margin-left:-0.35rem;
    }


    iframe.inspection_documents{
      width:10rem;
      height: 11.2rem;
      position: fixed;
      bottom:0;
      left:0;
      z-index: 10001;
      border:none;
    }

    .mask{
      position: fixed;
      z-index: 10000;
      left: 0;right: 0;bottom:0;top:0;
      background: rgba(0,0,0,0.5);
    }

    div.bottom_group {
      background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 57%);
      height: 2.266667rem;
      width: 10rem;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 9999;
    }
</style>
